@charset "utf-8";

@rem: 50rem;


/*基础全局样式*/
html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:26 /@rem;
    color: #000;
    overflow: hidden;
}

a {
    color: #000;
    font-size:16 /@rem;
    &:hover {
        color: orange;
    }
}

button {
    border: none;
}

img {
    vertical-align: top;
}


/*内容区布局*/

.g-box {
    width:750 /@rem;
    height:7150 /@rem;
    background: url(../image/bg.jpg) no-repeat;
    background-size: contain;
    position: relative;
}

.g-box-tyre {
    width:750 /@rem;
    height:4340 /@rem;
    background: url(../image/bg-tyre.jpg) no-repeat;
    background-size: contain;
    position: relative;
}

.g-box-chepin{
    width:750 /@rem;
    height:4340 /@rem;
    background: url(../image/bg-chepin.jpg) no-repeat;
    background-size: contain;
    position: relative;
}

.g-bd {
    position: absolute;
    left:0;
    top: 820 /@rem;
}
    .m-brand{}
    .u-tit1{
        width: 750 /@rem;
        font-size: 36 /@rem;
        line-height: 100 /@rem;
        text-align: center;
        color:#fff;
        text-align: center;
    }
    .m-you {
        display: flex;
        flex-direction: column;
        li {
            margin-bottom: 10 /@rem;
            display: flex;
            justify-content: space-between;
            width: 750 /@rem;
            height:356 /@rem;
            padding:30 /@rem 50 /@rem;

            background: url(../image/bg-you.png);
            background-size: contain;
            img {
                width:280 /@rem;
                height:280 /@rem;
                border-radius:5 /@rem;
            }
            .you-con {
                width:360 /@rem;
                h3 {
                    height:80 /@rem;
                    font-size:28 /@rem;
                    line-height:40 /@rem;
                    color: #fff;
                }
                .you-tag {
                    margin:20 /@rem 0;
                    overflow: hidden;
                    span {
                        float: left;
                        width:92 /@rem;
                        height:30 /@rem;
                        background-color: #fed51b;
                        line-height:30 /@rem;
                        font-size:18 /@rem;
                        text-align: center;
                        color: #e63112;
                        border-radius:5 /@rem;
                        margin-right:16 /@rem;
                    }
                }
                .you-price {
                    color: #ffda16;
                    font-size:28 /@rem;
                    padding-top:10 /@rem;
                    margin-bottom:20 /@rem;
                    span {
                        margin-left:10 /@rem;
                    }
                    em {
                        margin-left:18 /@rem;
                        font-size:22 /@rem;
                        color: #fff;
                        text-decoration: line-through;
                    }
                }
                button {
                    float: right;
                    margin-right:20 /@rem;
                    width:180 /@rem;
                    height:50 /@rem;
                    line-height:50 /@rem;
                    background-color: #fed51b;
                    font-size:24 /@rem;
                    line-height:50 /@rem;
                    text-align: center;
                    color: #e63112;
                    border-radius:5 /@rem;
                }
            }
        }
    }
    
    .m-more{
        color:#fff;
        text-align: center;
        .more-tit{
            font-size: 42 /@rem;
        }
        p{
            font-size: 26 /@rem;
        }
    }
    
    .g-rules {
        margin:40 /@rem 25 /@rem;
        height:250 /@rem;
        position: relative;
        .rules-top {
            position: absolute;
            top:-25 /@rem;
            left:200 /@rem;
            width:300 /@rem;
            height:50 /@rem;
            border-radius:25 /@rem;
            background: #fff;
            z-index: 1;
        }
        .m-rules {
            position: absolute;
            z-index: 2;
            background: #fff;
            width: 700 /@rem;
            padding:0 /@rem 30 /@rem;
            h2 {
                height:60 /@rem;
                line-height:60 /@rem;
                font-size:30 /@rem;
                color: #1a18e4;
                text-align: center;
                border-bottom:2 /@rem dashed #666;
            }
            .rules-con {
                padding:30 /@rem 0;
                p {
                    font-size:26 /@rem;
                    line-height:34 /@rem;
                }
            }
        }
    }

.g-bd-bls{
    background: #fbe9d1;
    padding-top: 150/@rem;
    li{
        // background:#fff;
    }
    .img-bgt{
        width: 750/@rem;
        height: 700/@rem;
    }
    .text-con{
        margin-bottom: 50/@rem;
        p{
            font-size: 38/@rem;
            line-height: 90/@rem;
            text-align: center;
            color:#cb2726;
            font-weight: bold;
        }
    }
    .m-bls{
        display: flex;
        width: 700/@rem;
        margin: 0 auto;
        padding:30/@rem;
        justify-content: space-between;
        background:#fff;
        border-radius:10/@rem;
        img{
            width: 280/@rem;
            height: 280/@rem;
        }
        .bls-con{
            h3{
                font-size: 32/@rem;
                line-height: 80/@rem;
            }
            .u-red{
                color:#f00;
            }
            p{
                font-size: 28/@rem;
                line-height: 60/@rem;
            }
            .bls-price{
                span{
                    font-weight: bold;
                    font-size: 32/@rem;
                }
                em{
                    margin-left: 20/@rem;
                    font-size: 24/@rem;
                    color: #f00;
                    text-decoration: line-through;
                }
            }
        }
        .btn-buy{
            float: right;
            margin-top: 30/@rem;
            width: 180/@rem;
            height: 50/@rem;
            line-height: 50/@rem;
            font-size: 28/@rem;
            text-align: center;
            background: #f00;
            color: #fff;
            border-radius: 10/@rem;
        }
    }
    .m-more{
        color:#cb2726;
        padding-bottom: 50/@rem;
    }
    .g-rules{
        margin-top: 80/@rem;
    }
}

.m-you li .you-con .chepin-h3{
    height:0.8rem;
}
.you-guige{
    color:#fff;
}